<template>
    <!--顶部布局-->
    <div class="common-layout">
        <el-container>
            <el-header>
                <!--菜单-->
                <Menu></Menu>
            </el-header>
            <el-container class="mid-layout">
                <!--左侧边-->
                <el-aside width="200px" class="leftAsideDiv">
                    <el-menu class="el-menu-vertical-demo " active-text-color="#42b983" >
                        <router-link :to="{path:'/allCourse',query:{name:'全部文本'}}" class="router-link"
                            style="text-decoration: none;">
                            <el-menu-item index="2" class="router-link">
                                <el-icon>
                                    <icon-menu />
                                </el-icon>
                                <span>全部文本</span>
                            </el-menu-item>
                        </router-link>
                        <router-link :to="{path:'/allCourse',query:{name:'全部课程'}}" class="router-link"
                            style="text-decoration: none;">
                            <el-menu-item index="3" class="router-link">
                                <el-icon>
                                    <icon-menu />
                                </el-icon>
                                <span>全部视频</span>
                            </el-menu-item>
                        </router-link>
                        <el-sub-menu index="1" class="router-link">
                            <template #title>
                                <el-icon>
                                    <icon-menu />
                                </el-icon>
                                <span>视频分类</span>
                            </template>
                            <router-link :to="{path:'/allCourse',query:{name:'普通课程'}}" class="router-link"
                                         style="text-decoration: none;">
                                <el-menu-item index="1-4" class="router-link">
                                    <el-icon>
                                        <icon-menu />
                                    </el-icon>
                                    <span>普通视频</span>
                                </el-menu-item>
                            </router-link>
                            <router-link :to="{path:'/allCourse',query:{name:'精品课程'}}" class="router-link"
                                         style="text-decoration: none;">
                                <el-menu-item index="1-5" class="router-link">
                                    <el-icon>
                                        <icon-menu />
                                    </el-icon>
                                    <span>精品视频</span>
                                </el-menu-item>
                            </router-link>
                            <router-link :to="{path:'/allCourse',query:{name:'工学课程'}}" class="router-link"
                                style="text-decoration: none;">
                                <el-menu-item index="1-1" class="router-link">
                                    <el-icon>
                                        <icon-menu />
                                    </el-icon>
                                    <span>工学视频</span>
                                </el-menu-item>
                            </router-link>
                            <router-link :to="{path:'/allCourse',query:{name:'理学课程'}}" class="router-link"
                                style="text-decoration: none;">
                                <el-menu-item index="1-2" class="router-link">
                                    <el-icon>
                                        <icon-menu />
                                    </el-icon>
                                    <span>理学视频</span>
                                </el-menu-item>
                            </router-link>
                            <router-link :to="{path:'/allCourse',query:{name:'文学课程'}}" class="router-link"
                                style="text-decoration: none;">
                                <el-menu-item index="1-3" class="router-link">
                                    <el-icon>
                                        <icon-menu />
                                    </el-icon>
                                    <span>文学视频</span>
                                </el-menu-item>
                            </router-link>
                            <router-link :to="{path:'/allCourse',query:{name:'法学课程'}}" class="router-link"
                                style="text-decoration: none;">
                                <el-menu-item index="1-4" class="router-link">
                                    <el-icon>
                                        <icon-menu />
                                    </el-icon>
                                    <span>法学视频</span>
                                </el-menu-item>
                            </router-link>
                        </el-sub-menu>

                        <el-sub-menu index="4" class="router-link">
                            <template #title>
                                <el-icon>
                                    <icon-menu />
                                </el-icon>
                                <span>文本分类</span>
                            </template>
                            <router-link :to="{path:'/allCourse',query:{name:'普通文本'}}" class="router-link"
                                         style="text-decoration: none;">
                                <el-menu-item index="4-4" class="router-link">
                                    <el-icon>
                                        <icon-menu />
                                    </el-icon>
                                    <span>普通文本</span>
                                </el-menu-item>
                            </router-link>
                            <router-link :to="{path:'/allCourse',query:{name:'精品文本'}}" class="router-link"
                                         style="text-decoration: none;">
                                <el-menu-item index="1-5" class="router-link">
                                    <el-icon>
                                        <icon-menu />
                                    </el-icon>
                                    <span>精品文本</span>
                                </el-menu-item>
                            </router-link>
                            <router-link :to="{path:'/allCourse',query:{name:'工学文本'}}" class="router-link"
                                         style="text-decoration: none;">
                                <el-menu-item index="1-1" class="router-link">
                                    <el-icon>
                                        <icon-menu />
                                    </el-icon>
                                    <span>工学文本</span>
                                </el-menu-item>
                            </router-link>
                            <router-link :to="{path:'/allCourse',query:{name:'理学文本'}}" class="router-link"
                                         style="text-decoration: none;">
                                <el-menu-item index="1-2" class="router-link">
                                    <el-icon>
                                        <icon-menu />
                                    </el-icon>
                                    <span>理学文本</span>
                                </el-menu-item>
                            </router-link>
                            <router-link :to="{path:'/allCourse',query:{name:'文学文本'}}" class="router-link"
                                         style="text-decoration: none;">
                                <el-menu-item index="1-3" class="router-link">
                                    <el-icon>
                                        <icon-menu />
                                    </el-icon>
                                    <span>文学文本</span>
                                </el-menu-item>
                            </router-link>
                            <router-link :to="{path:'/allCourse',query:{name:'法学文本'}}" class="router-link"
                                         style="text-decoration: none;">
                                <el-menu-item index="1-4" class="router-link">
                                    <el-icon>
                                        <icon-menu />
                                    </el-icon>
                                    <span>法学文本</span>
                                </el-menu-item>
                            </router-link>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <!--                        中心-->
                <el-container>
                    <el-main>
                        <!--滚动图片-->
                        <el-carousel indicator-position="outside">
                            <el-carousel-item>
                                <img src="../assets/HBS.jpg" style="height: 100%;width: 100%">
                            </el-carousel-item>
<!--                            <el-carousel-item>-->
<!--                                <img src="../assets/JSJ.png" style="height: 100%;width: 100%">-->
<!--                            </el-carousel-item>-->
                            <el-carousel-item>
                                <img src="../assets/HBS.png" style="height: 100%;width: 100%">
                            </el-carousel-item>
                            <el-carousel-item>
                                <img src="../assets/HBS2.png" style="height: 100%;width: 100%">
                            </el-carousel-item>
                        </el-carousel>
                    </el-main>
                </el-container>
                <!--                    右侧边-->
                <el-aside width="200px" class="rightAside">
                    <div style="font-family: 方正姚体;font-size: 20px">
                        一日之计在于晨，<br><br>
                        一年之计在于春。
                    </div>
                    <br>
                    <div>
                        <!--右侧头像和昵称显示-->
                        <el-avatar
                            v-if="(store.getters.getStatus)&&((avatarUrl !=null && avatarUrl!=''))"
                            :size="90" :src="store.getters.getAvatarUrl " />
                        <el-avatar v-else :size="90"
                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    </div>
                    <br>
                    <el-button type="success" round @click="jumpMine"
                        v-if="store.getters.getStatus&&nickname&&nickname!=''">
                        欢迎 {{store.getters.getNickname}}
                    </el-button>
                    <el-button type="success" round @click="jumpLogin" v-else>
                        登录 | 注册
                    </el-button>
                </el-aside>
            </el-container>
            <el-footer style="background-color: white;width: 70%;margin: 5px auto;position: relative;z-index: 0;">
                <el-row :gutter="0">
                    <el-col :span="4">
                        <div class="grid-content ep-bg-purple" />
                        <span style="font-size: 40px;font-family: 方正舒体" center>合作院校</span>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content ep-bg-purple" />
                        <a href="https://www.pku.edu.cn/" target="_blank"><img src="../assets/BJU.png"></a>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content ep-bg-purple" />
                        <a href="https://www.zju.edu.cn/" target="_blank"><img src="../assets/ZJU.png"></a>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content ep-bg-purple" />
                        <a href="https://www.nju.edu.cn/" target="_blank"><img src="../assets/NJU.png"></a>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content ep-bg-purple" />
                        <a href="https://www.ysu.edu.cn/" target="_blank"><img src="../assets/YSU.png"></a>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content ep-bg-purple" />
                        <a href="https://www.whu.edu.cn/" target="_blank"><img src="../assets/WHU.png"></a>
                    </el-col>
                </el-row>
            </el-footer>
        </el-container>
    </div>
    <!--循环渲染课程card-->
    <!-- 赵子鉴从此处加入推荐功能相关设计 -->
    <!-- —————————————————————————————————————————————————————————————————————————————————————————————— -->
   <div class="common-layout-course" v-if="store.getters.getStatus && JSON.stringify(recommendation) !='[]' && recommendation!=null ">
       <el-container>
           <el-header style="height: 30px">
               <div class="text-left">
                       推荐视频
               </div>
           </el-header>
           <el-main>
               <el-row :gutter="18">
                   <el-col :span="6" v-for="(item) in recommendation">
                       <CourseCard :course="item" :video="true" :text="false"></CourseCard>
                   </el-col>
               </el-row>
           </el-main>
       </el-container>
   </div>
    <!-- —————————————————————————————————————————————————————————————————————————————————————————————— -->
    <div class="common-layout-course" v-show="store.getters.getStatus && JSON.stringify(followCourses) !='[]' ">
        <el-container>
<!--            {{followCourses}}-->
            <el-header style="height: 30px">
                <div class="text-left">
                        你的关注
                </div>
            </el-header>
            <el-main>
                <el-row :gutter="18">
                    <el-col :span="6" v-for="(item) in followCourses">
                        <CourseCard :course="item" :video="(item.textualType==null || item.textualType=='')?true:false" :text="(item.textualType!=null && item.textualType!='')?true:false"></CourseCard>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
    <div class="common-layout-course">
        <el-container>
            <el-header style="height: 30px">
                <div class="text-left">
                    <router-link :to="{path:'/allCourse',query:{name:'普通课程'}}" class="router-link">
                        普通视频
                    </router-link>
                </div>
            </el-header>
            <el-main>
                <el-row :gutter="18">
                    <!--父子组件传值-->
                    <el-col :span="6" v-for="(item) in ordinaryCourse">
                        <CourseCard :course="item" :video="true" :text="false"></CourseCard>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
    <div class="common-layout-course">
        <el-container>
            <el-header style="height: 30px">
                <div class="text-left">
                    <router-link :to="{path:'/allCourse',query:{name:'精品课程'}}" class="router-link">
                        精品视频
                    </router-link>
                </div>
            </el-header>
            <el-main>
                <el-row :gutter="18">
                    <el-col :span="6" v-for="(item) in vipCourse">
                        <CourseCard :course="item" :video="true" :text="false"></CourseCard>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
<!--    <div class="common-layout-course">-->
<!--        <el-container>-->
<!--            <el-header style="height: 30px">-->
<!--                <div class="text-left">-->
<!--                    <router-link :to="{path:'/allCourse',query:{name:'工学课程'}}" class="router-link">-->
<!--                        工学视频-->
<!--                    </router-link>-->
<!--                </div>-->
<!--            </el-header>-->
<!--            <el-main>-->
<!--                <el-row :gutter="18">-->
<!--                    <el-col :span="6" v-for="(item) in engineeringCourse">-->
<!--                        <CourseCard :course="item"></CourseCard>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--            </el-main>-->
<!--        </el-container>-->
<!--    </div>-->
<!--    <div class="common-layout-course">-->
<!--        <el-container>-->
<!--            <el-header style="height: 30px">-->
<!--                <div class="text-left">-->
<!--                    <router-link :to="{path:'/allCourse',query:{name:'理学课程'}}" class="router-link">-->
<!--                        理学视频-->
<!--                    </router-link>-->
<!--                </div>-->
<!--            </el-header>-->
<!--            <el-main>-->
<!--                <el-row :gutter="18">-->
<!--                    <el-col :span="6" v-for="(item) in scienceCourse ">-->
<!--                        <CourseCard :course="item"></CourseCard>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--            </el-main>-->
<!--        </el-container>-->
<!--    </div>-->
<!--    <div class="common-layout-course">-->
<!--        <el-container>-->
<!--            <el-header style="height: 30px">-->
<!--                <div class="text-left">-->
<!--                    <router-link :to="{path:'/allCourse',query:{name:'文学课程'}}" class="router-link">-->
<!--                        文学视频-->
<!--                    </router-link>-->
<!--                </div>-->
<!--            </el-header>-->
<!--            <el-main>-->
<!--                <el-row :gutter="18">-->
<!--                    <el-col :span="6" v-for="(item) in literatureCourse">-->
<!--                        <CourseCard :course="item"></CourseCard>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--            </el-main>-->
<!--        </el-container>-->
<!--    </div>-->
<!--    <div class="common-layout-course">-->
<!--        <el-container>-->
<!--            <el-header style="height: 30px">-->
<!--                <div class="text-left">-->
<!--                    <router-link :to="{path:'/allCourse',query:{name:'法学课程'}}" class="router-link">-->
<!--                        法学视频-->
<!--                    </router-link>-->
<!--                </div>-->
<!--            </el-header>-->
<!--            <el-main>-->
<!--                <el-row :gutter="18">-->
<!--                    <el-col :span="6" v-for="(item) in lawCourse">-->
<!--                        <CourseCard :course="item"></CourseCard>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--            </el-main>-->
<!--        </el-container>-->
<!--    </div>-->
    <div class="common-layout-course">
        <el-container>
            <el-header style="height: 30px">
                <div class="text-left">
                    <router-link :to="{path:'/allCourse',query:{name:'普通文本'}}" class="router-link">
                        普通文本
                    </router-link>
                </div>
            </el-header>
            <el-main>
                <el-row :gutter="18">
                    <el-col :span="6" v-for="(item) in ordinaryText">
                        <CourseCard :course="item" :video="false" :text="true"></CourseCard>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
    <div class="common-layout-course">
        <el-container>
            <el-header style="height: 30px">
                <div class="text-left">
                    <router-link :to="{path:'/allCourse',query:{name:'精品文本'}}" class="router-link">
                        精品文本
                    </router-link>
                </div>
            </el-header>
            <el-main>
                <el-row :gutter="18">
                    <el-col :span="6" v-for="(item) in vipText">
                        <CourseCard :course="item" :video="false" :text="true"></CourseCard>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>

    <div class="common-layout-course">
        <el-container>
            <el-header style="height: 30px">
                <div class="text-left">
                    <router-link :to="{path:'/allCourse',query:{name:'全部课程'}}" class="router-link">
                        全部视频
                    </router-link>
                </div>
            </el-header>
            <el-main>
                <el-row :gutter="18">
                    <el-col :span="6" v-for="(item) in allCourse">
                        <CourseCard :course="item" :video="true" :text="false"></CourseCard>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>

    <div class="common-layout-course">
        <el-container>
            <el-header style="height: 30px">
                <div class="text-left">
                    <router-link :to="{path:'/allCourse',query:{name:'全部文本'}}" class="router-link">
                        全部文本
                    </router-link>
                </div>
            </el-header>
            <el-main>
                <el-row :gutter="18">
                    <el-col :span="6" v-for="(item) in allText">
                        <CourseCard :course="item" :video="false" :text="true"></CourseCard>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
    //引入区
    import {reactive, ref, onMounted, onBeforeMount, watch} from 'vue'
    import {useStore} from 'vuex'
    import {useRouter,useRoute} from 'vue-router'
    import {
        selectOrdinaryCourse,
        selectVipCourse,
        selectEngineeringCourse,
        selectLiteratureCourse,
        selectLawCourse,
        selectScienceCourse,
        selectAllCourse,

    } from "@/api/course";
    import {selectRecommendation} from '@/api/recommend'
    import {
        Document,
        Menu as IconMenu,
        Location,
        Setting,
    } from '@element-plus/icons-vue'
    import {selectAllTexts, selectOrdinaryTexts, selectVipTexts} from "@/api/textualmaterial";
    import {myFollowCount, myFollows, selectMyFollowCourse} from "@/api/user";

    //定义区
    const store = useStore();
    //课程列表
    const ordinaryCourse = ref();
    const vipCourse = ref();
    const engineeringCourse = ref();
    const scienceCourse = ref();
    const literatureCourse = ref();
    const lawCourse = ref();
    const allCourse = ref();

    const vipText = ref();
    const ordinaryText = ref();
    const allText = ref();

    const myFollowLists = ref([]);
    const recommendation = ref();// 推荐算法
    const followCourses = ref();//关注人群
    const followCounts = ref(0);


    const nickname = store.getters.getNickname
    // const teacherNickname = store.getters.getTeacherNickname
    const avatarUrl = store.getters.getAvatarUrl;
    // const teacherAvatarUrl = store.getters.getTeacherAvatarUrl;

    const router = useRouter();
    const route = useRoute();
    // console.log(route.query)

    //解决头部导航跳转同一路由问题
    // watch(route, (to, from) => {
    //     if (to.query.refresh){
    //         window.location.reload();
    //     }
    //
    // });
    //行为区
    const jumpMine = () => {
        router.push({path: '/mine/personalInfo'})
    }
    const jumpLogin = () => {
        router.push({path: '/login'});
    }
    onBeforeMount(async ()=>{
        //
        // let res =await myFollowCount({userId:store.getters.getId})
        // followCounts.value = res.data;

    })

    onMounted(async () => {
        selectOrdCourse();
        selectVCourse();
        // selectEngCourse();
        // selectSciCourse();
        // selectLitCourse();
        // selectLaCourse();
        selectCourses();

        selectTexts();
        selectVTexts();
        selectOTexts();

        selectRdCourse();
        selectMyFollowCourses();


    })
    const followCount = async ()=>{
        let res =await myFollowCount({userId:store.getters.getId})
        followCounts.value = res.data;
    }
    const FollowList = async ()=>{
            // myFollows({userId:store.getters.getId}).then((res)=>{
            //     myFollowLists.value = res.data;
            // })
            //
        let res = await myFollows({userId:store.getters.getId})
        myFollowLists.value = res.data;
        // console.log(myFollowLists.value)

    }
    //视频检索
    const selectOrdCourse = () => {
        selectOrdinaryCourse().then((res) => {
            ordinaryCourse.value = res.data;
        })
    }
    const selectVCourse = () => {
        selectVipCourse().then((res) => {
            vipCourse.value = res.data;
        })
    }
    const selectEngCourse = () => {
        selectEngineeringCourse().then((res) => {
            engineeringCourse.value = res.data;
        })
    }
    const selectSciCourse = () => {
        selectScienceCourse().then((res) => {
            scienceCourse.value = res.data;
        })
    }
    const selectLitCourse = () => {
        selectLiteratureCourse().then((res) => {
            literatureCourse.value = res.data;
        })
    }
    const selectLaCourse = () => {
        selectLawCourse().then((res) => {
            lawCourse.value = res.data;
        })
    }
    const selectCourses = () => {
        selectAllCourse().then((res) => {
            allCourse.value = res.data;
        })
    }
    //文档检索
    const selectTexts = ()=>{//全部文档
        selectAllTexts().then((res)=>{
            allText.value = res.data;
        })
    }
    const selectOTexts = ()=>{//普通文档
        selectOrdinaryTexts().then((res)=>{
            ordinaryText.value = res.data;
        })
    }
    const selectVTexts = ()=>{//精品课程
        selectVipTexts().then((res)=>{
            vipText.value = res.data;
        })
    }

// 推荐算法
    const selectRdCourse = () => {
        // console.log("推荐算法测试点0.0")
        if (store.getters.getStatus == true){
            //学生访问
            // console.log("推荐算法测试点0.2")
            selectRecommendation({ userId: store.getters.getId  }).then((res) => {
                recommendation.value = res.data;
                // console.log("223:");
                console.log(recommendation.value);
            })
        }
        // console.log("推荐算法测试点0.3")
    }

    const selectMyFollowCourses = ()=>{
        // console.log(".........")
        if (store.getters.getStatus == true){
            selectMyFollowCourse({userId:store.getters.getId}).then((res)=>{
                followCourses.value = res.data;
                // console.log(followCourses.value)
            })
        }

    }

</script>

<style scoped>

    .mid-layout {
        width: 70%;
        margin: 0 auto;
        background-color: white;
        /*position: relative;*/
    }

    .el-carousel__item h3 {
        display: flex;
        color: #475669;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }

    .rightAside {
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .common-layout-course {
        width: 70%;
        margin: 0 auto;
    }


    .text-left {
        text-align: left;
        font-size: 28px;
    }

    .el-row {
        margin-bottom: 20px;
    }

    .el-row:last-child {
        margin-bottom: 0;
    }

    .el-col {
        border-radius: 4px;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 6px;
    }

    img {
        width: 160px;
        height: 50px;
    }

    .footDiv {
        display: flex;
        align-items: center;
        margin: 5px 265px;
        background-color: white;
    }

    div > a {
        color: #2c3e50;
        text-decoration: none;
    }


    .router-link:hover {
        color: #42b983;
    }

    .leftAsideDiv {
        position: relative;
        overflow: visible;
    }

    .el-menu-vertical-demo {
        position: absolute;
        width: 100%;
        z-index: 1;
    }
</style>

